<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>夜读书FM</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="夜读书,夜读书FM,电台">
    <meta name="description" content="音频分享平台，随时随地，听我想听！4亿用户选择的在线音频平台。1亿多条原创有声内容覆盖有声书、儿童、相声评书、财经新闻、音乐等328类。">
    <meta name="keywords" content="夜读书,网络电台,个人电台,音频,有声书,相声,儿童,音乐,情感">
    <link rel="stylesheet" href="{{ asset('/style/css/yefm.css') }}">  
    <script src="{{ asset('/scripts/jquery/jquery-1.11.3.min.js') }}"></script>    
    <script src="{{ asset('/scripts/ximalaya/xmsdk.min.js') }}"></script>
    <script src="{{ asset('/scripts/ximalaya/vue.min.js') }}"></script>     
</head>
<body>   
<div class="page">
    @include('yefm.inc.top_dark')
    <div class="player-content" v-cloak>
        <div class="player-box rel">
            <div class="xm-bg-blur player-box-bg" :style="{backgroundImage: 'url(' + rows.tracks[0].cover_url_middle + ')'}">            
            </div>
            <div class="rel">
                <div class="cover-container rel">
                    <span class="player_btn prev"></span>
                    <a href=""><span class="player_btn next"></span></a>
                    <div class="track-cover rel">
                        <img class="cover-image" :src="rows.tracks[0].cover_url_middle">
                        <i class="player-sprite play-btn player-play" v-if="!playflg" @click="play_tracks"></i>
                        <i class="player-sprite play-btn player-pause" v-if="playflg" @click="pause_tracks"></i>
                        <div class="play-count">
                            <i class=""></i>@{{play_count}}
                        </div>
                    </div>
                </div>
                <h1 class="title"><span class="v-m">@{{rows.tracks[0].track_title}}</span></h1>
                <div class="progress-bar-wrap rel">
                    <div class="progress-bar">
                        <div class="touch-box" @click="doclick()"></div>
                        <div :style="'width:'+ loading +'%;'" class="cache-round"></div>
                        <div :style="'width:'+ rangeValue +'%;'" class="play-round"></div>
                        <span class="time-bar current">@{{starttime}}</span>                
                        <span class="time-bar duration">@{{duration}}</span>
                    </div>
                </div>
            </div>
        </div>    
        <div class="rich-box">@{{rows.tracks[0].track_intro}}</div>
        @include('yefm.adinc.ximalaya')
    </div>
    <div style="text-align: center;"><img src="http://www.yedushu.com/images/xiaochengxu.jpg" /><p>扫码访问夜读书小程序</p></div>
    <div class="track-list" v-cloak>
        <div class="album-info">
            <div class="list-meta">
                <a :href="'{{url('yefm/ting').'/'}}' + rows.album_id" class="cover">
                    <img :src="rows.cover_url_small">
                </a>
                <div class="">
                    <a :href="'{{url('yefm/ting').'/'}}' + rows.album_id"><h2 class="album-info-title">@{{rows.album_title}}</h2></a>
                    <p class="album-info-desc">@{{rows.total_count}}集</p>
                </div>
            </div>
        </div>
        <ul class="list-body">
            <li class="list-item" v-for="row in rows.tracks">
                <a :href="'{{url('yefm/ting').'/'}}' + rows.album_id +'/' + row.id" class="track-link">
                    <div class="xm-list-track">
                        <p class="xm-icon list-play icon-list_play">
                            <img src="{{url('images/yefm/btn_play.png')}}" style="width: 25px;height: 25px;">
                        </p>
                        <div class="titleWrapper">@{{row.track_title}}</div>
                        <p class="xm-icon list-download icon-list_download">@{{formatTime(row.updated_at)}}</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="load-more mr-bottom" v-if="rows.current_page < rows.total_page" @click='loadMore'>点击加载更多</div>
        <div class="load-more mr-bottom" v-else>没有更多了</div>
    </div>
@include('yefm.inc.footer')
</div> 
<script src="{{url('/scripts/ximalaya/yefmconfig.js')}}"></script>
<script>
    const xmly = new XMLY();

    const player = new XMplayer({
        playlist: [{{$tracks_id}}], //要播放的声音id
        playMode: 'single', //播放模式
        breakpoint: true, //断点续播
        autoSkip: true, //声音不可播时，自动跳过播放下一个
    });

    // 获取某条声音在专辑内所属声音页信息列表 
    xmly.request({
        url: 'https://api.ximalaya.com/tracks/get_last_play_tracks',
        type: 'get',
        params: {
            album_id: '{{$album_id}}',
            track_id: '{{$tracks_id}}',
            count: 1,
            sort: 'asc',
            contains_paid: true,
        }
    }).then(res => {
        // console.log(res.data);        
        new Vue({
            el: '.player-content',
            data: {
                rows: res.data,
                playflg: false, // 播放状态
                starttime: '00:00', //正在播放时长
                rangeValue: 0, //当前播放进度位置
                loading: 0, //当前加载进度位置
            },
            mounted() {
                document.title = this.rows.tracks[0].track_title + ' - 夜读书FM';
            },
            computed: {
                duration: function() {
                    //音频时长
                    // return (this.rows.tracks[0].duration / 60).toFixed(2);
                    let t;
                    let s = this.rows.tracks[0].duration;
                    if(s > -1){
                        hour = Math.floor(s/3600);
                        min = Math.floor(s/60) % 60;
                        sec = s % 60;
                        day = parseInt(hour / 24);
                        if (day > 0) {
                            hour = hour - 24 * day;
                            t = day + "day " + hour + ":";
                        }
                        else t = hour + ":";   
                        if(min < 10){t += "0";}
                            t += min + ":";
                        if(sec < 10){t += "0";}
                            t += sec;
                    }
                    return t;
                },
                play_count: function ()  {
                    //计算播放次数
                    let count = this.rows.tracks[0].play_count;
                    if(count >= 100000000) {
                        return (count/100000000).toFixed(2) + '亿';
                    }
                    else {
                        return (count/10000).toFixed(2) + '万';
                    }
                }
            },
            methods: {
                //开始播放
                play_tracks: function() {                    
                    this.playflg = true;
                    player.play();
                    player.on('loading', (percent, sound) => {
                        this.loading = percent * 100;
                        // console.log(percent);
                    });
                    if(this.playflg = true) {
                    var timer = setInterval(() => {
                        var min = "0" + parseInt(player.seek() / 60);
                        var max = parseInt(this.duration);
                        //取余
                        var sec = parseInt(player.seek() % 60);
                        if (sec < 10) {
                          sec = "0" + sec;
                        };
                            this.starttime = min + ':' + sec;   /*  00:00  */
                            this.rangeValue = player.seek() * (100 / this.rows.tracks[0].duration);
                            //播放完毕
                            if(this.rangeValue == this.rows.tracks[0].duration) {
                                this.rangeValue = 0;/*播放结束后进度条归零*/
                                this.starttime =' 00:00'; /*播放结束后时间归零*/
                                player.stop();
                                clearInterval(timer);
                            }
                        }, 1000); //1000毫秒等于1秒
                    }
                },
                //暂停
                pause_tracks: function() {
                    player.pause();
                    this.playflg = false;
                },
                play_next: function() {
                    //下一个声音
                    // 专辑浏览
                    var page = this.rows.current_page + 1;
                    // console.log(page);
                    xmly.request({
                        url: 'https://api.ximalaya.com/albums/browse',
                        type: 'get',
                        params: {
                            album_id: '{{$album_id}}',
                            sort: 'asc',
                            page: page,
                            count: 1,
                        }
                    }).then(res1 => {                        
                            var tracks = res1.data.tracks[0].id;
                            // console.log(tracks);
                            // return tracks;
                        });
                    return tracks;
                },
                doclick: function(){
                    //声音的总时长
                    // var time = (this.rows.tracks[0].duration / 680).toFixed(2) * moveTo;
                    // 定位到 time 秒位置并播放（如果输入的位置已超出了当前播放声音的总时长，会播放下一个）
                    player.seek(50);
                    this.play_tracks();
                }
            }
        });   
    });

    // 专辑浏览
    xmly.request({
        url: 'https://api.ximalaya.com/albums/browse',
        type: 'get',
        params: {
            album_id: '{{$album_id}}',
            sort: 'asc',
            page: 1,
            count: 10,
        }
    }).then(res => {
        // console.log(res);
        new Vue({
            el: '.track-list',
            data: {
                rows: res.data
            },
            methods: {
                loadMore:function(){
                    this.rows.current_page += 1;
                    xmly.request({
                        url: 'https://api.ximalaya.com/albums/browse',
                        type: 'get',
                        params: {
                            album_id: '{{$album_id}}',
                            sort: 'asc',
                            page: this.rows.current_page,
                            count: 10,
                        }
                    })
                    .then(ret => {
                        // console.log(ret.data);
                        //将请求回来的数据和上一次进行组合
                        for(i=0; i<ret.data.tracks.length; i++)
                        {
                            this.$set(this.rows.tracks, this.rows.tracks.length, ret.data.tracks[i]);
                        }
                    })
                    .catch(err => {
                        alert(err);
                    });
                },
                formatTime: function(value) {
                    var date = new Date(value);
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
                    return Y + M;
                }
            }
        });   
    });    
</script>
</body>
</html>
